<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>做题情况分析</title>
    <!-- Try multiple CDNs with fallback -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js" integrity="sha512-ElRFoEQdI5Ht6kZvyzXhYG9NqjtkmlkfYk0wr6wHxU9JEHakS7UJZNeml5ALk+8IKlU6jDgMabC3vkumRokgJA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <!-- Fallback if the first CDN fails -->
    <script>
        if(typeof Chart === 'undefined') {
            document.write('<script src="https://cdn.bootcdn.net/ajax/libs/Chart.js/3.9.1/chart.min.js"><\/script>');
        }
    </script>
    <!-- Second fallback -->
    <script>
        if(typeof Chart === 'undefined') {
            document.write('<script src="https://unpkg.com/chart.js@3.9.1/dist/chart.min.js"><\/script>');
        }
    </script>
</head>
<body>
    <h1>做题情况分析</h1>
    
    <div style="width: 80%; margin: 0 auto;">
        <canvas id="myChart"></canvas>
    </div>
    
    <div style="text-align: center; margin-top: 30px;">
        <p>正确题数: {{ correct_count }} / {{ total_count }}</p>
        <p>正确率: {{ accuracy|floatformat:1 }}%</p>
        <a href="{% url 'start_test' %}" style="display: inline-block; margin-top: 20px; padding: 10px 20px; background-color: #4CAF50; color: white; text-decoration: none; border-radius: 4px;">返回测试页面</a>
    </div>
    
    <script>
        // Check if Chart is loaded before trying to use it
        if(typeof Chart !== 'undefined') {
            const ctx = document.getElementById('myChart').getContext('2d');
            const myChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: {{ labels|safe }},
                    datasets: [{
                        label: '正确率 (%)',
                        data: {{ data|safe }},
                        backgroundColor: 'rgba(75, 192, 192, 0.2)',
                        borderColor: 'rgba(75, 192, 192, 1)',
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    scales: {
                        y: {
                            beginAtZero: true,
                            max: 100
                        }
                    },
                    plugins: {
                        title: {
                            display: true,
                            text: '测试结果分析'
                        }
                    }
                }
            });
        } else {
            // Fallback if Chart.js couldn't be loaded
            document.write('<div style="text-align: center; color: red;">图表加载失败，请检查网络连接</div>');
        }
    </script>
</body>
</html>